<template>
	<view>
		<view class="banners">
			<u-swiper
				:list="routesDetails.albums"
				keyName="url"
				:height="800"
				@change="e => albumsCurrentNum = e.current"
				:autoplay="false"
				indicatorStyle="right: 30rpx; bottom:50rpx"
			>
				<view
					slot="indicator"
					class="indicator-num"
				>
					<text class="indicator-num__text">{{ albumsCurrentNum + 1 }}/{{ routesDetails.albums.length }}</text>
				</view>
			</u-swiper>
		</view>
		
		<view class="details-wrap">
			<view class="content-padding base-info">
				<u-text :lines="3" :size="36" :bold="true" :text="routesDetails.route_name"></u-text>
				
				<view class="label-list flex">
					<view class="label-item" v-for="(label,lKey) in routesDetails.label" :key="lKey">
						{{ label }}
					</view>
				</view>
				
				<view class="price-info flex">
					<view class="normal-price">
						<text class="normal-price__icon">￥</text>
						<text class="normal-price__nums">
							{{ routesDetails.prime_price > 0 ? routesDetails.prime_price : routesDetails.price }}
						</text>
						<text class="normal-price__unit">/人</text>
						<text class="normal-price__start">起</text>
					</view>
					<view class="prime-price flex" @click="checkPrime" v-if="(!userInfo.uid || !userInfo.prime_info.status)&&routesDetails.prime_price>0">
						<text class="prime-price__normal">会员价低至 </text>
						<text class="prime-price__bold">￥{{ routesDetails.prime_price }}</text>
					</view>
				</view>
				
				<view class="service-wrap flex">
					<view class="service-item flex" :style="{marginRight:'20rpx'}" v-if="routesDetails.is_return_gold==1">
						<u-icon :label="'下单可返' + routesDetails.price + '金币'" size="32" :labelSize="26" labelColor="#333" name="checkmark-circle-fill" color="rgb(64 178 25)"></u-icon>
					</view>
					<view class="service-item flex" :style="{marginRight:'20rpx'}" v-if="routesDetails.is_gift_insurance==1">
						<u-icon label="送出行险" size="32" :labelSize="26" labelColor="#333" name="checkmark-circle-fill" color="rgb(64 178 25)"></u-icon>
					</view>
					<view class="service-item flex" v-if="routesDetails.is_refund_whatever==1">
						<u-icon label="随心退" size="32" :labelSize="26" labelColor="#333" name="checkmark-circle-fill" color="rgb(64 178 25)"></u-icon>
					</view>
				</view>
			</view>
			
			<view class="to-open-wrap u-flex u-flex-between" @click="checkPrime" v-if="!userInfo.uid || !userInfo.prime_info.status">
				<u-icon color="#FF5722" labelColor="#FF5722" labelSize="32" label="开通会员，享受会员价" size="40" name="level"></u-icon>
				<view class="to-open">去开通</view>
			</view>
			
			<u-divider :hairline="true"></u-divider>
			
			<view class="content-padding address-info flex" v-if="routesDetails.start_address && routesDetails.end_address">
				<view class="address-item flex">
					<text class="address-item__key">出发</text>
					<u-text class="address-item__val" :size="28" :lines="2" :text="routesDetails.start_address"></u-text>
				</view>
				
				<view class="address-item flex">
					<text class="address-item__key">结束</text>
					<u-text class="address-item__val" :size="28" :lines="2" :text="routesDetails.end_address"></u-text>
				</view>
			</view>
			
			<u-gap height="30" bgColor="#f2f2f2"></u-gap>
			
			<view class="content-padding choose-date-wrap">
				<view class="sub-header">
					<view class="indi"></view>
					<view class="titl">选择日期</view>
				</view>
				<view class="date-list flex">
					<view class="date-item flex" :style="{marginRight:'26rpx'}" v-for="(spItem,spIndex) in routesDetails.skuPrices" :key="spIndex" v-if="spIndex<=2" @click="openBuyPage">
						<u-text :bold="true" align="center" :size="28" :text="spItem.date"></u-text>
						<u-text :size="26" color="#666" align="center" :text="spItem.week"></u-text>
						<u-text :bold="true" :size="32" align="center" iconStyle="color:#ff5a5f;font-size:12px;margin-top:4px;" prefixIcon="rmb" color="#ff5a5f"  :text="spItem.price"></u-text>
					</view>
					
					<view class="date-item flex" v-if="routesDetails.skuPrices.length>3" @click="openBuyPage">
						<u-icon name="calendar" :size="80" color="#ff5a5f"></u-icon>
						<u-text :size="26" color="#666" align="center" text="更多日期"></u-text>
					</view>
				</view>
			</view>
			
			<u-gap height="20" bgColor="#f8f8f8"></u-gap>
			
			<!-- 详情模块开始 -->
			<u-sticky :zIndex="100">
				<u-subsection :list="routesDetails.details" key="id" keyName="mod_title" :fontSize="28" activeColor="#FF5722" @change="detailsModSwitch" :current="currentModIndex"></u-subsection>
			</u-sticky>
			
			<scroll-view scroll-y="true">
				<view class="content-padding choose-date-wrap" :id="'detailsMod'+key" v-for="(item,key) in routesDetails.details">
					<view class="sub-header">
						<view class="indi"></view>
						<view class="titl">{{ item.mod_title }}</view>
					</view>
					<view class="route-details flex">
						<rich-text style="max-width: 690rpx;" :nodes="item.mod_details" v-if="item.mod_details"></rich-text>
						<text v-else>暂无内容</text>
					</view>
				</view>
			</scroll-view>
			<!-- 详情模块结束 -->
			
			<view class="page-footer-placehold"></view>
			<view class="page-footer flex">
				<view class="page-footer__info flex">
					<view class="footer-item flex" @click="openKf">
						<view class="icon-wrap phone">
							<u-icon name="phone" :size="46" color="#ffffff"></u-icon>
						</view>
						<u-text :size="26" text="客服"></u-text>
					</view>
					
					<!-- <view class="footer-item flex" @click="onShare">
						<view class="icon-wrap wechat">
							<u-icon name="weixin-fill" :size="46" color="#ffffff"></u-icon>
						</view>
						<u-text :size="26" text="分享" open-type="share"></u-text>
					</view> -->
				</view>
				<view class="page-footer__option">
					<u-button @click="openBuyPage" text="立即购买" :customStyle="{fontWeight:'bold'}" shape="circle" color="linear-gradient(to right, rgb(255 90 95 / 77%), #ff0000)"></u-button>
				</view>
			</view>
		</view>
		
		<!-- 立即购买 -->
		<u-popup :show="showBuyPage" :closeable="true" @close="hideBuyPage" :round="40" :close-on-click-overlay="true">
			<view class="popup-page">
				<view class="popup-page__title flex">
					<text>选择日期/团队/人数</text>
				</view>
				
				<scroll-view scroll-y="true">
					<view class="popup-page__content">
						<view class="sub-header">
							<view class="indi"></view>
							<view class="titl">选择套餐</view>
						</view>
						<view class="sku-list flex">
							<view :class="[buyRouteInfo.sku_id == skuItem.sku_id ? 'sku-item-active' : 'sku-item-normal',skuIndex!=(skuList.length-1) ? 'mr-20' :'','sku-item']" v-for="(skuItem,skuIndex) in skuList" :key="skuIndex" @click="clickSkuItem(skuItem)">
								{{ skuItem.sku_name }}
							</view>
						</view>
						
						<view class="month-wrapper">
							<view class="sub-header">
								<view class="indi"></view>
								<view class="titl">出行日期</view>
							</view>
							<view class="allow-months flex">
								<view :class="[choosedMonth==item.month?'active':'','allow-month-item flex']" v-for="(item,index) in allowSoldMonths" :key="index" @click="chooseMonth(item)">
									<text class="allow-month-item__month">{{ item.name }}</text>
								</view>
							</view>
						</view>
						
						<view class="calander-wrapper">
							<!-- 会覆盖住日期选择 -->
							<!-- <view class="calander-month">{{ calenderMonth }}</view> -->
							<view class="week-wrap flex">
								<view class="week-item calander-sep">
									<text class="calander-sep__grey">日</text>
								</view>
								<view class="week-item calander-sep">
									<text>一</text>
								</view>
								<view class="week-item calander-sep">
									<text>二</text>
								</view>
								<view class="week-item calander-sep">
									<text>三</text>
								</view>
								<view class="week-item calander-sep">
									<text>四</text>
								</view>
								<view class="week-item calander-sep">
									<text>五</text>
								</view>
								<view class="week-item calander-sep">
									<text class="calander-sep__grey">六</text>
								</view>
							</view>
							<view class="week-wrap days-wrap flex">
								<template v-for="(item,key) in skuPrices">
									<template v-if="key==0">
										<view class="week-item calander-sep" v-for="place in item.week" :key="place">
											<text class="days-wrap__date"></text>
											<text class="days-wrap__price"></text>
										</view>
									</template>
									
									<view :class="[(item.left_store < 1 || item.expired == 1) ? 'disable-day' : '', buyRouteInfo.date == item.date ? 'week-item-active':'', 'week-item calander-sep flex']"  @click="selectDay(item)">
										<text class="days-wrap__date">{{ item.date_text3 }}</text>
										<text class="days-wrap__price">
											<template v-if="item.expired">
												<template v-if="item.price > 0 && item.left_store > 0">已售罄</template>
												<template v-else><u-text text="已售罄" color="#fff"></u-text></template>
											</template>
											<template v-else>
												<template v-if="item.price > 0 && item.left_store > 0">{{ '￥' + item.price }}</template>
												<template v-else>
													<template v-if="item.price > 0 && item.left_store <= 0">已售罄</template>
													<template v-else><u-text text="已售罄" color="#fff"></u-text></template>
												</template>
											</template>
										</text>
									</view>
								</template>
							</view>

							<view class="nums-wrap" v-if="buyRouteInfo.date">
								<view class="nums-wrap__title flex">
									<text class="main">购买数量</text>
									<text class="sub">{{ routesDetails.min_sold_num }}人起售</text>
								</view>
								
								<view class="nums-wrap__content">
									<view class="item flex">
										<view class="key flex">
											<text class="key__title">成人:</text>
											<text class="key__content">18周岁(含)以上</text>
										</view>
										<view class="value">
											<u-number-box 
												button-size="36"
												color="#ffffff"
												:integer="true"
												:inputWidth="46"
												:min="routesDetails.min_sold_num"
												:max="buyRouteInfo.left_store"
												v-model="buyRouteInfo.nums"
												bgColor="#ff5a5f"
												iconStyle="color: #fff"
											></u-number-box>
										</view>
									</view>
									<view class="item flex">
										<view class="key flex">
											<text class="key__title">单价:</text>
											<text class="key__content">{{ buyRouteInfo.price }}元</text>
										</view>
										<view class="value">
											<u-text color="#808080" :size="30" :text="'库存:'+buyRouteInfo.left_store+'件'"></u-text>
										</view>
									</view>
									<!-- <view class="item flex">
										<view class="key flex">
											<u-text color="#808080" :size="30" :text="'大床:'+buyRouteInfo.big_room+'间'"></u-text>
										</view>
										<view class="value">
											<u-text color="#808080" :size="30" :text="'双床:'+buyRouteInfo.double_room+'间'"></u-text>
										</view>
									</view> -->
									
									<view class="item flex">
										<view class="key flex">
											<text class="key__title u-flex u-flex-items-center">总金额</text>
											<u-text color="#ff5a5f" bold :size="48" :text="totalAmt"></u-text>
										</view>
									</view>
									
									<template v-if="routesDetails.support_deposit == 1">
										<view class="item flex">
											<view class="key flex">
												<text class="key__title u-flex u-flex-items-center">定金</text>
												<u-text color="#ff5a5f" bold :size="28" :text="totalDespAmt"></u-text>
											</view>
										</view>
										
										<view class="item flex ">
											<view class="key flex u-flex-between" style="width: 100%;">
												<u-text prefixIcon="info-circle" color="#ff9900" iconStyle="font-size:28rpx; color: #ff9900;margin-right: 4px" :size="28" :text="'满'+routesDetails.desposit.min_people+'人(含)以上支持先定金后尾款'"></u-text>
												<text class="key__title u-flex u-flex-items-center pay-desposit" @click="payDesposit()">付定金</text>
											</view>
										</view>
									</template>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
		
				<view class="popup-page__footer">
					<view class="buy-opt-area flex">
						<view class="choosed-sku flex" v-if="buyRouteInfo.date">
							<text class="choosed-sku__title">已选择</text>
							<text class="choosed-sku__date">{{ buyRouteInfo.date_text2 }}</text>
							<text class="choosed-sku__nums">{{ buyRouteInfo.nums }}成人</text>
						</view>
						<view v-else></view>
						
						<view class="buy-button" @click="submitBuy()">立即购买</view>
					</view>
				</view>
			</view>
		</u-popup>
					
		<!-- 客服服务弹窗 -->
		<ftx-kfservice :show="showKf" @change="changeVal"></ftx-kfservice>
	</view>
</template>

<script>
	import { getRoutesDetails,routesSkuList,routesSkuPrice,orderUnionCreate,orderUnionPayment } from '@/api/api.js'
	import config from '@/utils/config'
	export default {
		data() {
			return {
				currentModIndex: 0,
				showKf: false,
				albumsCurrentNum : 0,
				showBuyPage: false,
				buyRouteInfo: {
					order_type: 1,
					route_id: 0,
					sku_id: 0,
					date: '',
					date_text2: '',
					nums: 1,
					price: 0,
					left_store: 0,
					big_room: 0,
					double_room: 0,
					use_deposit: 0,
				},
				routesDetails: {
					albums: [],
					route_name: '',
					label: [],
					is_return_gold: 0,
					is_gift_insurance: 0,
					is_refund_whatever: 0,
					price: 0,
					start_address: '',
					end_address: '',
					min_sold_num: 1,
					skuPrices:[],
					details: [],
					support_deposit: 0,
					desposit: {
						deposit_amt: 0,
						min_people: 0
					}
				},
				skuList: [],
				skuPrices: [],
				allowSoldMonths: [],
				choosedMonth: '',
				userInfo: {},
				spread_uid: uni.getStorageSync('ftxUserId') || 0,
				calenderMonth: ''
			};
		},
		computed: {
			totalAmt: function() {
				return uni.$lv.number.format(uni.$lv.number.mul(this.buyRouteInfo.nums,this.buyRouteInfo.price),2)
			},
			totalDespAmt: function() {
				if ( this.buyRouteInfo.support_deposit == 0 || !this.routesDetails.desposit ) return 0
				
				let deposit_amt = this.routesDetails.desposit.deposit_amt || 0
				return uni.$lv.number.format(uni.$lv.number.mul(this.buyRouteInfo.nums,deposit_amt),2)
			}
		},
		onShareAppMessage: function () {
		    const promise = new Promise(resolve => {
				resolve({
				  title: this.routesDetails.share_info || this.routesDetails.route_name,
				  path: `/pages/routes/details?route_id=${this.routesDetails.id}&spread_uid=${this.spread_uid}`
				})
			})
			return {
			  title: config.appName,
			  path: `/pages/index/index?spread_uid=${this.spread_uid}`,
			  promise 
			}
		},
		onShareTimeline: function () {
			return {
			  title: this.routesDetails.share_info || this.routesDetails.route_name,
			  query: `route_id=${this.routesDetails.id}&spread_uid=${this.spread_uid}`,
			  imageUrl: this.routesDetails.cover
			}
		},
		watch: {
			'buyRouteInfo.sku_id': function(newVal,oldVal) {
				this.buyRouteInfo.date = ''
			},
			choosedMonth: function(newVal,oldVal) {
				if (this.choosedMonth != ''){
					this.loadSkuPrice()
				}
			}
		},
		onLoad(options) {
			this.buyRouteInfo.route_id = options.route_id || 0
			if ( this.buyRouteInfo.route_id > 0 ) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getRoutesDetails(this.buyRouteInfo.route_id).then(res => {
					this.routesDetails = res.data
					this.buyRouteInfo.nums = this.routesDetails.min_sold_num || 1
				})
				
				this.userInfo = uni.getStorageSync('ftxUserInfo') || {}
				
				let spread_uid = options.spread_uid || 0
				if ( spread_uid > 0 ) {
					uni.setStorageSync('ftxSpreaderUid' , spread_uid)
				}
			}
		},
		methods: {
			clickSkuItem(skuItem) {
				this.buyRouteInfo.sku_id = skuItem.sku_id || 0
				this.allowSoldMonths = skuItem.allow_sold_monthes || []
				this.choosedMonth = this.choosedMonth ? '' : (this.allowSoldMonths.length > 0 ? (this.allowSoldMonths[0].month) : '')
			},
			selectDay(skuDay) {
				if ( !skuDay.left_store || skuDay.expired ) {
					return uni.showToast({
						title: '该日期暂不可售',
						icon: 'none'
					})
				}
				this.buyRouteInfo.date = skuDay.date || ''
				this.buyRouteInfo.date_text2 = skuDay.date_text2 || ''
				this.buyRouteInfo.price = skuDay.price || 0
				this.buyRouteInfo.left_store = skuDay.left_store || 0
				this.buyRouteInfo.big_room = skuDay.big_room || 0
				this.buyRouteInfo.double_room = skuDay.double_room || 0
			},
			loadSkuPrice() {
				if ( !this.choosedMonth ) {
					return uni.showToast({
						title: '请选择月份',
						icon: 'none'
					})
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				routesSkuPrice(this.buyRouteInfo.route_id,this.buyRouteInfo.sku_id,this.choosedMonth).then(res => {
					this.skuPrices = res.data
				})
			}
			,payDesposit() {
				if ( this.routesDetails.support_deposit != 1 ) {
					return uni.showToast({
						title: '该线路不支持定金',
						icon: 'none'
					}) 
				}
				if ( this.buyRouteInfo.nums < this.routesDetails.desposit.min_people ) {
					return uni.showToast({
						title: '预定人数不足',
						icon: 'none'
					}) 
				}
				
				this.buyRouteInfo.use_deposit = 1
				this.submitBuy()
			}
			,submitBuy() {
				if ( !this.buyRouteInfo.date ) {
					return uni.showToast({
						title: '请选择出行日期',
						icon: 'none'
					}) 
				}
				
				if ( this.buyRouteInfo.nums < this.routesDetails.min_sold_num ) {
					return uni.showToast({
						title: '最小起售数不足',
						icon: 'none'
					}) 
				}
				
				if ( !this.buyRouteInfo.nums ) {
					return uni.showToast({
						title: '数量不能为空',
						icon: 'none'
					}) 
				}
				
				if ( this.buyRouteInfo.nums > this.buyRouteInfo.left_store ) {
					return uni.showToast({
						title: '超出可买库存',
						icon: 'none'
					}) 
				}

				uni.showLoading({
					title: '订单提交中',
					mask: true
				})
				orderUnionCreate(this.buyRouteInfo).then(res => {
					uni.showToast({
					    title: '下单成功',
					    icon: 'success'
					})
					
					orderUnionPayment(res.data.order_id).then(payres => {
						if ( payres.data.pay_status == 1 ) {
							setTimeout(function(){
								uni.navigateTo({
									url: `/pages/order/routes?current=1`
								})
							},2000)
							
							return uni.showToast({
								title: "支付成功~",
							})
						}
						
						if ( payres.data.pay_params ) {
							uni.requestPayment({
								...payres.data.pay_params,
								success: () => {
									setTimeout(function(){
										uni.navigateTo({
											url: `/pages/order/routes?current=1`
										})
									},2000)
									return uni.showToast({
										title: "支付成功~",
									})
								},
								fail: () => {
									setTimeout(function(){
										uni.navigateTo({
											url: `/pages/order/routes?current=0`
										})
									},2000)
									return uni.showToast({
										title: "支付失败~",
										icon: 'none'
									})
								}
							})
						}
					})
				})
			},
			openBuyPage() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				routesSkuList(this.buyRouteInfo.route_id).then(res => {
					this.skuList = res.data
					
					if ( this.skuList.length > 0 ) {
						let _defaultSku = this.skuList[0]

						this.buyRouteInfo.sku_id = _defaultSku.sku_id || 0
						this.allowSoldMonths = _defaultSku.allow_sold_monthes || []
						if ( this.allowSoldMonths.length > 0 ) {
							this.choosedMonth = this.allowSoldMonths[0].month
							this.calenderMonth = this.allowSoldMonths[0].month_num
						}
					}
					
					this.showBuyPage = true
				})
			},
			hideBuyPage() {
				this.showBuyPage = false
			},
			chooseMonth(item) {
				this.choosedMonth = item.month
				this.calenderMonth = item.month_num
				this.loadSkuPrice()
			},
			changeVal: function (opt) {
				if (typeof opt != 'object') opt = {};
				var action = opt.action || '';
				var value = opt.value || '';
				this[action] && this[action](value);
			},
			openKf: function() {
				this.showKf = true
			},
			closeKf:function() {
				this.showKf = false
			},
			checkPrime() {
				if ( !this.userInfo.uid ) {
					return uni.showModal({
						title: '登录提示',
						content: '登录后查看会员价',
						showCancel: true,
						confirmText: '去登录',
						success(res) {
							if( res.confirm ) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
				}
				
				if ( this.userInfo.prime_info ) {
					if ( this.userInfo.prime_info.status == 0 ) {
						return uni.showModal({
							title: '开通提示',
							content: '您还不是会员，立即开通',
							showCancel: true,
							confirmText: '去开通',
							success(res) {
								if( res.confirm ) {
									uni.switchTab({
										url: '/pages/my/my'
									})
								}
							}
						})
					}
				}
			}
			,async detailsModSwitch(modIndex) {
				this.currentModIndex = modIndex
				uni.pageScrollTo({
					selector: "#detailsMod"+modIndex,
					duration: 500
				});
			}
			,onShare() {
				return console.log('必须是button且open-type=share时才有效')
				// uni.share({
				// 	provider: "weixin",
				// 	scene: "WXSceneSession",
				// 	type: 0,
				// 	href: "http://uniapp.dcloud.io/",
				// 	title: "uni-app分享",
				// 	summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				// 	imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
				// 	success: function (res) {
				// 		console.log("success:" + JSON.stringify(res));
				// 	},
				// 	fail: function (err) {
				// 		console.log("fail:" + JSON.stringify(err));
				// 	}
				// });
			}
		}
	}
</script>

<style lang="scss">
	page {
	background-color: $uni-bg-color-grey;
}
.banners {
	
}
.to-open-wrap {
	padding: 16rpx 30rpx;
	width: 630rpx;
	margin: 20rpx auto 0 auto;
	background: linear-gradient(to right, rgba(250,90,95,0.4), rgba(250,90,95,0.5), rgba(250,90,95,0.7));
	border-radius: 10rpx;
	.to-open {
		width: 120rpx;
		padding: 8rpx;
		background-color: #FFFFFF;
		color: #FF5722;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		border-radius: 22rpx;
		margin-left: 20rpx;
	}
}
.pay-desposit {
	background-color: #18b566;
	color: #FFFFFF;
	border-radius: 6rpx;
	padding: 4rpx 20rpx;
	margin-right: 0!important;
	font-size: 28rpx!important;
}
.sub-header {
	@include flex;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1px solid #e2e2e2;
	.indi {
		width: 10rpx;
		height: 30rpx;
		border-radius: 6rpx;
		background-color: $uni-price-color;
		margin-right: 8rpx;
	}
	.titl {
		font-size: 32rpx;
		font-weight: bold;
	}
}
.details-wrap {
	background-color: #fff;
	/** 
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
	margin-top: -30rpx;*/
	padding: 30rpx 0;
	position: relative;
	.content-padding {
		padding: 0 30rpx;
	}
	.label-list {
		margin-top: 12rpx;
		flex-wrap: wrap;
		.label-item {
			font-size: 24rpx;
			padding: 4rpx 10rpx;
			background-color: #f5fff0;
			border-style: solid;
			border-width: 1px;
			border-color: #5ac725;
			color: #5ac725;
			border-radius: 10rpx;
			margin-right: 14rpx;
			margin-bottom: 14rpx;
		}
	}
	
	.price-info {
		margin: 16rpx 0;
		align-items: center;
		.normal-price {
			&__icon {
				color: $uni-price-color;
				font-weight: bold;
			}
			&__nums {
				color: $uni-price-color;
				font-size: 30px;
				font-weight: bold;
				margin-right: 14rpx;
			}
			&__unit {
				font-size: 22px;
			}
			&__start {
				font-size: 14px;
				margin-left: 14rpx;
				color: #999;
			}
		}
		.prime-price {
			background-color: $uni-bg-color-light;
			color: #FFFFFF;
			align-items: center;
			padding: 0rpx 20rpx;
			border-radius: 16rpx;
			font-size: 28rpx;
			margin-left: 26rpx;
			height: 56rpx;
			&__bold {
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}
	
	.service-wrap {
		.service-item {
			align-items: center;
			font-size: 26rpx;
		}
	}
	
	.address-info {
		padding-bottom: 30rpx;
		.address-item {
			width: 320rpx;
			align-items: baseline;
			&__key {
				color: $uni-text-color-placeholder;
				margin-right: 12rpx;
				font-size: 26rpx;
			}
		}
		.address-item:not(:last-child) {
			border-right: 1rpx solid $uni-text-color-disable;
			margin-right: 20rpx;
			padding-right: 20rpx;
		}
	}
	
	.choose-date-wrap {
		margin: 20rpx 0;
		.date-list {
			margin-top: 20rpx;
			width: 690rpx;
			@include flex;
			justify-content: space-between;
			.date-item {
				width: 150rpx;
				flex-direction: column;
				align-items: center;
				padding: 16rpx 0;
				background-color: $uni-bg-color-hover;
				border-radius: 20rpx;
			}
		}
	}
	
	.route-details {
		margin-top: 20rpx;
		color: #333;
		font-size: 28rpx!important;
		width: 690rpx;
		overflow: hidden;
		image,div,section,p {
			max-width: 690rpx!important;
		}
	}
}
.indicator-num {
	padding: 10rpx 28rpx;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 28rpx;
	@include flex;
	justify-content: center;
	&__text {
		 color: #FFFFFF;
		 font-size: 26rpx;
	 }
}
.sku-list {
	flex-wrap: wrap;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	.sku-item-active {
		color: $uni-price-color;
		border-color: $uni-price-color;
	}
	.sku-item-normal {
		color: #333;
		border-color: #333;
	}
	.sku-item {
		font-size: 26rpx;
		border-width: 1px;
		border-style: solid;
		padding: 6rpx 18rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	
}
.month-wrapper {
	.allow-months {
		padding: 20rpx 0 10rpx 0;
		border-bottom: solid 1rpx $uni-text-color-disable;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		color: $u-main-color;
		.active {
			color: #ff5a5f;
			
		}
		.allow-month-item {
			width: 100rpx;
		}
	}
}
.calander-wrapper {
	position: relative;
	.calander-month {
		position: absolute;
		left: 40%;
		top: 20%;
		font-size: 180rpx;
		color: #0c0b0b14;
		font-weight: bold;
		z-index: 100;
	}
	.calander-sep {
		font-size: 28rpx;
		width: 98.57rpx;
		@include flex;
		justify-content: center;
		&__grey{
			color: $uni-text-color-placeholder;
		}
	}
	.week-wrap {
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}
	.days-wrap {
		.disable-day {
			.days-wrap__date {
				color: $uni-text-color-disable;
			}
			.days-wrap__price {
				color: $uni-text-color-disable;
				font-size: 24rpx;
			}
		}
		&__date {
			font-size: 28rpx;
			font-weight: bold;
		}
		&__price {
			font-size: 26rpx;
			color: $uni-price-color;
		}
		.week-item {
			flex-direction: column;
			align-items: center;
			padding: 20rpx 0;	
		}
		.week-item-active {
			background-color: #f44336;
			color: #fff;
			border-radius: 10rpx;
			.days-wrap__price {
				color: #fff!important;
			}
		}
	}
	.nums-wrap {
		padding: 30rpx;
		border: 1rpx solid $uni-border-color;
		border-radius: 10rpx;
		&__title {
			align-items: baseline;
			margin-bottom: 20rpx;
			.main {
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}
			.sub {
				color: #808080;
				font-size: 28rpx;
			}
		}
		&__content {
			.item{
				justify-content: space-between;
				.key {
					&__title{
						margin-right: 20rpx;
						font-size: 30rpx;
					}
					&__content {
						font-size: 30rpx;
						color: #000;
					}
				}
			}
			.item:not(:last-child){margin-bottom: 14rpx;}
		}
	}
}
.buy-opt-area {
	padding: 20rpx 30rpx;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	.choosed-sku {
		font-size: 34rpx;
		&__title {
			margin-right: 20rpx;
			color: $u-main-color;
			font-weight: bold;
		}
		&__date {
			margin-right: 10rpx;
		}
		&__nums {
			margin-right: 10rpx;
			color: #ff5a5f;
		}
	}
	.buy-button {
		padding: 16rpx 40rpx;
		background-color: $uni-price-color;
		color: #FFF;
		border-radius: 30rpx;
		font-size: 28rpx;
	}
}
	
.page-footer-placehold {
	height: 100rpx;
}
.page-footer {
	height: 130rpx;
	padding: 0 30rpx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 200;
	justify-content: space-between;
	align-items: center;
	&__info {
		@include flex;
		width: 80rpx;
		.footer-item {
			flex-direction: column;
			align-items: center;
			margin-right: 56rpx;
			.icon-wrap {
				@include flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				width: 56rpx;
				height: 56rpx;
				color: #FFFFFF;
			}
			.phone {
				background-color: #2b85e4;
			}
			.wechat {
				background-color: #19be6b;
			}
		}
	}
	&__option {
		flex: 1;
		padding: 10rpx 20rpx;
		.buy-btn {
			background-color: linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186));
		}
	}
}
</style>
